<template>
  <div id="home">
    <down-tip></down-tip>
    <header-bar :title="title"></header-bar>
    <sticky top="0px" z-ndex="100000">
      <div class="nav_box flex-row " :class="!showMore?'vux-1px-b':''">
        <div class="scroller flex-grow-0">
          <scroller v-show="!showMore" lock-y :scrollbar-x="false" :bounce="false">
            <top-nav @nav-item-click="navItemclick" :goodCatId="goodCatId" :navList="navList"
                     :itemWidth="itemWidth"></top-nav>
          </scroller>
          <div class="choose" v-show="showMore">选择分类</div>
        </div>
        <div @click="showMore=!showMore" class="nav_right flex-grow-1">
          <div class="arror" :class="!showMore? 'arrordown':'arrorup' "></div>
        </div>
      </div>
      <div v-show="showMore" class="nav_list ">
        <div @click="moreListClick(index)" class="list_item" :class="{'current':goodCatId==index}"
             v-for="(item,index) in navList">{{item.name}}
        </div>
      </div>
    </sticky>
    <div class="product">
      <div @click="toTaobao(item.tbkCouponLink)" class="list-item" v-for="(item,index) in couponListData">
        <div class="product-img">
          <!--<img v-lazy=" item.mainPic+'_320x320.jpg' " alt="">-->
          <img v-lazy=" item.mainPic" alt="">
          <div v-show="item.iconForIOS" class="l_t_icon" :style="{backgroundImage:`url(${item.iconForIOS})`}"></div>
        </div>
        <div class="product-desc vux-1px-b">
          <p class="name oneLine">{{item.name}}</p>

          <!--***************************************-->
          <p class="price" v-show="item.priceAfterCoupon>=0">
            <span>￥</span>
            <span class="priceNum">{{item.priceAfterCoupon | getCount}}</span>
            <span style="color:#a6a4b2">券后价</span>
            <span style="color:#a6a4b2;font-size:0.22rem;margin-left:.3rem;text-decoration: line-through">原价:￥{{item.price |getCount}}</span>
          </p>
          <!--加入item.priceAfterCoupon小于0-->
          <p class="price" v-show="item.priceAfterCoupon<0">
            <span>￥</span>
            <span class="priceNum">{{item.price | getCount}}</span>
            <span style="color:#a6a4b2">{{item.couponInfo}}</span>
          </p>
          <!--***************************--->

          <div class="product-desc-bottom  clearfix">
            <div class="fl">
              <p>
                <span class="goods_tip">券</span>
                <span class="goods_txt">{{item.couponValue |getCount }}元券</span>
              </p>
              <p style="margin-top: 8px">
                <span class="goods_tip">抢</span>
                <span class="goods_txt">{{item.couponUse}}人已领</span>
              </p>
            </div>
            <div class="fr">
              <button class="btn">领券抢购</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <bottom-show :showBottom="showBottom"></bottom-show>
    <tab-bar :activeIndex="activeIndex"></tab-bar>

    <!--底部背景过渡opacity-->
    <transition name="fade">
      <div class="bg" v-show="showMore"></div>
    </transition>

  </div>
</template>
<script>

  var mo=function(e){e.preventDefault();};
  import TabBar from 'src/components/common/TabBar.vue'
  import HeaderBar from 'src/components/common/headerBar.vue'
  import BottomShow from 'src/components/common/bottomShow.vue'
  import TopNav from 'src/components/common/TopNav.vue'
  import DownTip from 'src/components/common/downTip'
  import {Scroller} from 'vux'
  import Sticky from 'vue-sticky-position';
  import MDUtils from 'src/assets/js/md-utils'

  import {URI_GETTYPE, RUI_GETTYPECOUPON, URI_SHZGOODS} from 'src/const/uri'

  export default {
    components: {TabBar, Scroller, Sticky, HeaderBar, BottomShow, TopNav, DownTip},
    data() {
      return {
        title: '首页',
        activeIndex: 0,
        navList: [],
        couponList: [],
        itemWidth: 50,
        showBottom: false,
        reqPage: 1,
        reqPageSize: 10,
        goodCatId: 0, //0 指的是全部
        couponListData: [],
        saveListData: [],
        sw: true,
        isWx: MDUtils.isWx(),
        showMore: false,
      }
    },
    watch: {
      showMore(val) {
        if (val) {
          // console.log(11);
          // alert(document.body);
          // document.body.style.overflow = 'hidden'
          this.stop();
        } else {
          // document.body.style.overflow = ''
          this.move();
        }
      }
    },
    created() {
      this.getList();
      // this.initData();
      this.getshzGoods()
    },
    mounted() {
      let spinner = document.getElementsByClassName('spinner')[0];
      spinner.style.display = 'none';
      let Home = document.getElementById('home');
      window.addEventListener('scroll', () => {
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        // 判断是否滚动到底部
        if (scrollTop + document.documentElement.clientHeight >= Home.offsetHeight - 200) {
          if (this.sw == true) {
            this.reqPage += 1;
            this.sw = false;
            this.getshzGoods();
          }
        }
        if (scrollTop > 100) {
          this.showBottom = true;
        }
        else {
          this.showBottom = false;
        }
      })
    },
    methods: {
      /***禁止滑动***/
      stop() {
        document.body.style.overflow = 'hidden';
        document.addEventListener("touchmove", mo, false);//禁止页面滑动
      },

      /***取消滑动限制***/
      move() {
        document.body.style.overflow = '';//出现滚动条
        document.removeEventListener("touchmove", mo, false);
      },
      getList() {
        this.$ajax.get(URI_GETTYPE, {}, (res) => {
          this.navList = res.data;
          // console.log('navList');
          //console.log(this.navList);
        });
      },
      getshzGoods() {
        this.$ajax.get(URI_SHZGOODS, {
          goodCatId: this.goodCatId,
          reqPage: this.reqPage,
          promotionTypeId: 6,
          sorts:'sales'
        }, (res) => {
          this.saveListData = this.saveListData.concat(res.data.data);
          this.couponListData = this.saveListData;
          console.log(this.saveListData);
          this.sw = true;
          if (res.data.data.length < 10) {
            //说明没数据了
            this.sw = false;
          }
          ;
        });
      },
      initData() {
        this.$ajax.get(RUI_GETTYPECOUPON, {
          reqPage: this.reqPage,
          reqPageSize: this.reqPageSize,
          goodCatId: this.goodCatId,//商品分类Id （0 代表全部）
          promotionTypeId: 6,
          type: -1
        }, (res) => {
          this.saveListData = this.saveListData.concat(res.data.data);
          this.couponListData = this.saveListData;
          console.log(this.saveListData);
          this.sw = true;
          if (res.data.data.length < 10) {
            //说明没数据了
            this.sw = false;
          }
          ;
        });
      },
      navItemclick(val) {
        //console.log(val);
        this.goodCatId = val;
        this.reqPage = 1;
        this.saveListData = [];
        //this.initData();
        this.getshzGoods();
      },
      moreListClick(index) {
        this.showMore = !this.showMore;
        this.goodCatId = index;
        this.reqPage = 1;
        this.saveListData = [];
        this.getshzGoods();
      },
      toTaobao(item) {
        if (this.isWx) {
          //alert(item);
          item=encodeURIComponent(item);
          //item=decodeURIComponent(item)
          let beforeUrl = document.URL.replace(/index/g, "isWxOpen").split('?')[0];
          let toUrl = `${beforeUrl}?link=${item}`;
          window.location.href = toUrl;
        } else {
          window.location.href = item
        }
      }
    }

  }
</script>
<style lang="less" scoped>
  @import "index";
</style>
